<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../style/default/jsvm.css"/>
<link rel="stylesheet" type="text/css" href="../../style/default/dashboard.css"/>
<script id="j$vm" src="../../jsvm/jsre.js" ></script>
<script src="../../jsvm/lib/jsre-ui.js" ></script>
<style>

.panel,
.panel_0 {
    left: 100px;
    top: 100px;
    width: 400px;
    height:300px;
    border: 2px solid red;
    padding: 5px;
    background-color: #CCCCCC;
}

.bt,
.bt_0{
   width: 60px;
   height: 30px;
   background-color: #FFFFFF;
   border: 1px solid blue;
}

.labButton,
.labButton_0{
    background-color:#CCCCCC;
    color:white;
    cursor:pointer;
    font-weight: bold;
    text-align : center;
    width: 90px;
    height:16px;
}

.card1, .card2, .card3, .card4,
.card1_0, .card2_0, .card3_0, .card4_0 {
    width: 60px;
    height:60px;
}

.card1,
.card1_0 {
    left: 0px;
    border: 2px solid red;
}

.card2,
.card2_0 {
    left: 60px;
    border: 2px solid green;
}

.card3,
.card3_0 {
    left: 120px;
    border: 2px solid blue;
}

.card4,
.card4_0 {
    left: 180px;
    border: 2px solid red;
}

.demowin_title_button_icon,
.demowin_title_button_icon_0 {
    width: 16,
    height:16
}


</style>
</head>
<body>
</body>


<script type="text/javascript">

J$VM.exec("Demo", function(System){

    this.prefer({theme: "default"});

    var DemoWindow = new js.awt.Window({
        id: "DemoWindow",
        css:"background-color:white;border:2px solid #CCCCCC;",

        items:["title","client"],
        
        title:{
            classType: "js.awt.HBox",
            constraints:"north",

            hovershow: true,
            hovershowbutton: true,

            items:["labTitle", "btnMax","btnClose"],
            
            labTitle:{
                classType: "js.awt.Label",
                css:"padding: 0px 2px 0px 4px;",
                text: "Demo Window"
            },

            btnMax:{
                classType: "js.awt.Button",
                iconImage: "maximize.png"
            },

            btnClose:{
                classType: "js.awt.Button",
                iconImage: "close.png"
            }
        },
        
        client:{
            classType:"js.awt.IFrame",
            constraints:"center"
            
        },
        resizer :255,
        mover:{longpress: 5, bt:1.0, bl:1.0}, movable:true,
        x:50, y:50,
        width: 640,
        height: 480,
        miniSize:{width: 60, height:30},
        maxiSize:{width: 800, height:600}
    },this);

    this.addComponent(DemoWindow);

    
    this.addComponent(new js.awt.Component({
        className: "moving",
        id :"moving1",
        css:"position:absolute;border:2px solid red;background-color:white;",
        x: 700, y: 10,
        width: 100, height:100,
        mover :{longpress: 10, br:1, bb:1},
        movable: true,
        resizer:0xff, resizable:true
    }, this));

    this.addComponent(new js.awt.Component({
        className: "moving",
        id :"moving2",
        css:"position:absolute;border:2px solid blue;background-color:white;",
        x: 700, y: 120,
        width: 100, height:100,
        mover :{longpress: 10, br:1, bb:1},
        movable: true,
        resizer:0xff, resizable:true
    }, this));

    this.addComponent(new js.awt.Label({
        className :"labButton",
        text: "CardLayout",
        id: "labCardLayout",
        x: 10, y: 10
    },this));

    this.addComponent(new js.awt.Label({
        className :"labButton",
        text: "BorderLayout",
        id:"labBorderLayout",
        x: 110, y: 10
    },this));

    this.addComponent(new js.awt.Label({
        className :"labButton",
        text: "BoxLayout",
        id:"labBoxLayout",
        x: 210, y: 10
    },this));

    this.addComponent(new js.awt.Label({
        className :"labButton",
        text: "FlowLayout",
        id:"labFlowLayout",
        x: 310, y: 10
    },this));

    this.addComponent(new js.awt.Label({
        className :"labButton",
        text: "GridLayout",
        id:"labGridLayout",
        x: 410, y: 10
    },this));
    
    this.addComponent(new js.awt.Label({
        className :"labButton",
        text: "GridBagLayout",
        id:"labGridBagLayout",
        x: 510, y: 10
    },this));
    
    var _showCardLayout = function(){
        this.DemoWindow.loadUrl("cardlayout.html");
    }

    var _showBorderLayout = function(){
        this.DemoWindow.loadUrl("borderlayout.html");
    }

    var _showBoxLayout = function(){
        this.DemoWindow.loadUrl("boxlayout.html");
    }

    var _showFlowLayout = function(){
        this.DemoWindow.loadUrl("flowlayout.html");
    }

    var _showGridLayout = function(){
        this.DemoWindow.loadUrl("gridlayout.html");
    }
    
    var _showGridBagLayout = function(){
        this.DemoWindow.loadUrl("gridBaglayout.html");
    }

    this.labCardLayout.attachEvent("click", 0, this, _showCardLayout);
    this.labBorderLayout.attachEvent("click", 0, this, _showBorderLayout);
    this.labBoxLayout.attachEvent("click", 0, this, _showBoxLayout);
    this.labFlowLayout.attachEvent("click", 0, this, _showFlowLayout);
    this.labGridLayout.attachEvent("click", 0, this, _showGridLayout);
    this.labGridBagLayout.attachEvent("click", 0, this, _showGridBagLayout);
    
    _showCardLayout.call(this);


    var menuDef = {
        id: "menuRoot",
        nodes:[
            {id:"menuFile", name:"File", checked:true},
            {id:"menuOpen", labelText:"Open", 
             nodes:[
                 {id:"menuOpen1", labelText:"File1"},
                 {id:"menuOpen2", labelText:"File2"},
             ]},
            {type: "-"},
            {id:"menuExit", labelText:"Exit", state:8},
            {id:"menuProp", labelText:"Propertiesd fads fasdfa dsfadsfasdfadsfasdfasd", 
             nodes:[
                 {id:"menuProp1", labelText:"Prop1"},
                 {id:"menuProp2", labelText:"Prop2", nodes:[{id:"menuProp3", labelText:"Prop3"}]}
             ]}
        ],
        shadow: true
    };

    MyDialogObject = function(def, Runtime){
        var CLASS = MyDialogObject, thi$ = CLASS.prototype;
        if(CLASS.__defined__){
            this._init.apply(this, arguments);
            return;
        }
        CLASS.__defined__ = true;
    
        var Class = js.lang.Class, Event = js.util.Event, DOM = J$VM.DOM,
        System = J$VM.System;

       this._init.apply(this, arguments);

    }.$extend(js.awt.Component).$implements(js.awt.DialogObject);

    var menu = new js.awt.Menu(menuDef, this, null, null);
    menu.setPeerComponent(this);
    menu.setHideOnBlur(false);
    menu.showAt(600,600);

    this.addComponent(new js.awt.Button({
        id: "btFlip",
        labelText:"Title",
        x: 10, y: 600
    }, this));

    var _flip = function(){
        DemoWindow.setTitleStyle(0,3);
    };

    this.btFlip.attachEvent("click", 0, this, _flip);

    this.onmenuFile = function(){
        //
    };

    this.onmenuOpen = function(){
        this.openDialog("jsvm_dlg", {width:640, height:480}, new MyDialogObject({}, this));
    };

    var _onMenuEvent = function(e){
        var id = e.getEventTarget().id;
        System.err.println(id+" "+e.getType());        
        
        if(typeof this["on"+id] == "function"){
            this["on"+id]();
        }
    }

//    DemoWindow.setMaximized(true);

    J$VM.MQ.register("js.awt.event.MenuItemEvent", this, _onMenuEvent);
//    J$VM.MQ.register("js.awt.event.LayerEvent", this, _onMenuEvent);

    js.util.Event.attachEvent(document, "contextmenu", 1, this, function(e){
        return e.cancelDefault();
    });

});
</script>
</html>
